<template>
  <div class="container">
    <block v-for="(item,index) in goods" :key="index" :index="index">
      <van-swipe-cell :right-width="65" style="width:100%;">
        <van-cell style="padding: 0;">
          <view slot="title" class="title" @click="toDetail(item)">
            <img class="imgInfo" :src="item.product_image + '?imageView2/1/w/120/h/120/q/75'">
            <view class="centerInfo">
              <view class="name">{{item.product_title}}</view>
              <view class="sonName">{{item.sku_name}}</view>
              <view class="price">￥{{item.price}}</view>
            </view>
          </view>
          <view class="amount">x{{item.amount}}</view>
        </van-cell>
        <view slot="right" class="delect" @click="onDelete(index)">删除</view>
      </van-swipe-cell>
    </block>
    <div class="cart-empty" v-if="goods.length === 0&&me">
      <p >
        <img src="../../../static/images/empty-cart.png" style="width:400rpx; height:335rpx;">
      </p>
      <van-button type="default" size="small" @click="onHome">去逛逛</van-button>
    </div>
    <div class="cart-empty" v-if="!me">
      <p>您还未登录哦，先去登录吧^-^</p>
        <van-button type="default" size="small" @click="onLogin">去登录</van-button>
    </div>

    <van-submit-bar
      v-if="goods.length > 0&&me"
      safe-area-inset-bottom="false"
      custom-class="mk-submit-bar"
      :price="total"
      button-text="去结算"
      @submit="onSubmit"
    />

    <van-dialog id="van-dialog"/>
    <van-toast id="van-toast"/>
  </div>
</template>
<script>
import Dialog from 'vant-weapp/dist/dialog/dialog'
import Toast from 'vant-weapp/dist/toast/toast'
import * as CartAction from '@/api/cart'
import * as OrderAction from '@/api/order'
import {mapState} from 'vuex'

export default {
  data () {
    return {
      goods: null
    }
  },
  onLoad () {
    this.goods = []
  },
  onShow () {
    wx.showNavigationBarLoading()
    if (this.me) this.fetchCartItems()
    wx.stopPullDownRefresh()
  },
  computed: {
    ...mapState(['me']),
    total () {
      if (!this.goods) return 0
      let price = 0.0
      for (let item of this.goods) {
        price += Number(item.price) * Number(item.amount)
      }
      return price * 100
    }
  },
  methods: {
    onLogin () {
      wx.navigateTo({ url: '../auth/login-index?target=cart' })
    },
    onHome () {
      wx.switchTab({
        url: '../home/index'
      })
    },
    toDetail (item) {
      wx.navigateTo({
        url: '../product/detail?id=' + item.product_id
      })
    },
    onDelete (index) {
      Dialog.confirm({
        title: '提示',
        message: '您确认删除当前商品吗？'
      }).then(() => {
        CartAction.destroy(this.goods[index].id).then(data => {
          this.goods.splice(index, 1)
          Toast('删除成功')
        }).catch(err => Toast(err.msg))
      }).catch(() => {})
    },
    fetchCartItems () {
      CartAction.list()
        .then(data => {
          data.map(item => {
            item.checked = true
          })
          this.goods = data
          wx.hideNavigationBarLoading()
        })
        .catch(err => Toast(err.msg))
    },
    onSubmit () {
      var ids = []
      this.goods.map(item => { if (item.checked) ids.push(item.id) })
      if (ids.length === 0) {
        Toast('请选择要购买的商品')
        return
      }
      OrderAction.storeFromCart({ ids: ids })
        .then(data => {
          wx.navigateTo({ url: '../order/confirm?id=' + data.id })
        }).catch(err => Toast(err.msg))
    }
  }
}
</script>
<style lang="less" scoped>
@theme-red: #e6648c;
.container {
  padding-bottom: 100rpx;
  height: 100%;
  width: 100%;
  .title {
    display: flex;
    width:600rpx;
    .imgInfo {
      width: 180rpx;
      height: 180rpx;
      overflow: hidden;
    }
    .centerInfo {
      flex: 1;
      padding: 0 18rpx;
      .name {
        font-size: 30rpx;
        font-weight: 500;
        height: 45rpx;
        overflow: hidden;
      }
      .sonName {
        font-size: 24rpx;
        color: #777;
        overflow: hidden;
        height: 75rpx;
        line-height:36rpx;
      }
      .price {
        font-size: 32rpx;
        color: @theme-red;
      }
    }
  }
  .amount {
    box-sizing: border-box;
    width: 60rpx;
    text-align: center;
    height:180rpx;
    line-height:180rpx;
  }
  .delect {
    background-color:#ff3b32;
    color:#fff;
    font-size:34rpx;
    text-align:left;
    width:180rpx;
    height:218rpx;
    line-height:218rpx;
    text-indent:1em;
  }
  .cart-empty {
    text-align: center;
    min-height: 955rpx;
    display: flex;
    flex-flow: column;
    justify-content: center;
    p {
      color: #999;
      font-size: 24rpx;
      margin: 25rpx;
    }
  }
}
</style>


